<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="执业证书编号" prop="practiceCertificateNo">
        <el-input
          v-model.trim="queryParams.practiceCertificateNo"
          placeholder="请输入事务所执业证书编号"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="事务所名称" prop="firmName">
        <el-input
          v-model.trim="queryParams.firmName"
          placeholder="请输入事务所名称"
          clearable
          size="small"
          class="width220"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="点击进行选择"
          clearable
          size="small"
          class="width220"
          @change="handleQuery"
        >
          <el-option  label="提交审批" value="1" />
          <el-option label="审批通过" value="2" />
          <el-option label="审批不通过" value="-2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <!--<el-button-->
          <!--type="warning"-->
          <!--icon="el-icon-download"-->
          <!--size="mini"-->
          <!--@click="handleExport"-->
          <!--v-hasPermi="['system:post:export']"-->
        <!--&gt;导出</el-button>-->
      </el-form-item>
    </el-form>

    <el-table
      ref="myTable"
      :data="dataList"
      max-height="600"
      border
      stripe
      fit
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed />
      <el-table-column v-if="colData[0].isTrue" fixed label="事务所编号" prop="office_number" />
      <el-table-column v-if="colData[1].isTrue" fixed label="事务所名称" prop="firm_name" :show-overflow-tooltip="true" width="150" />
      <el-table-column v-if="colData[2].isTrue" label="新联系人名称" prop="new_contacts" :show-overflow-tooltip="true" width="150" />
      <el-table-column v-if="colData[4].isTrue" label="新联系电话" prop="new_contact_number" />
      <el-table-column v-if="colData[6].isTrue" label="新联系手机号" prop="new_contact_mobile" />
      <el-table-column v-if="colData[3].isTrue" label="旧联系人名称" prop="old_contacts" />
      <el-table-column v-if="colData[5].isTrue" label="旧联系电话" prop="old_contact_mobile" />
      <el-table-column v-if="colData[7].isTrue" label="旧联系手机号" prop="old_contact_number" />
      <el-table-column  label="附件" prop="contactsUpdateFile" width="170">
       <!-- <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px"
                    :src="picturePrefix + scope.row.contactsUpdateFile"
                    :preview-src-list="[picturePrefix + scope.row.contactsUpdateFile]" alt="">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>-->
        <template slot-scope="scope">
          <el-image style="width: 50px; height: 50px"
                    v-if="scope.row.contactsUpdateFile != undefined && (scope.row.contactsUpdateFile.indexOf('jpg') !== -1 || scope.row.contactsUpdateFile.indexOf('JPG') !== -1 || scope.row.contactsUpdateFile.indexOf('JPEG') !== -1 || scope.row.contactsUpdateFile.indexOf('jpeg') !== -1  || scope.row.contactsUpdateFile.indexOf('png') !== -1 ||  scope.row.contactsUpdateFile.indexOf('PNG') !== -1 )"
                    :src="picturePrefix + scope.row.contactsUpdateFile"
                    :preview-src-list="[picturePrefix + scope.row.contactsUpdateFile]" alt="">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <span style="width: 50px; height: 50px" v-if="scope.row.contactsUpdateFile != undefined && ( scope.row.contactsUpdateFile.indexOf('pdf') !== -1 || scope.row.contactsUpdateFile.indexOf('PDF') !== -1 )" @click="downloadFile(scope.row.contactsUpdateFile,scope.row.new_contacts)"> <a href="#">{{picturePrefix + scope.row.contactsUpdateFile}}</a></span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[8].isTrue" label="申请人姓名" prop="applicant_name" />
      <el-table-column v-if="colData[9].isTrue" label="申请时间" prop="apply_time" width="200" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.apply_time,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[10].isTrue" label="状态" prop="status">
        <template slot-scope="scope">
          <span>{{ resvoleStatus(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[11].isTrue" label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status===1" type="primary" plain size="mini" @click="handleExamine(scope.row,'通过')" v-hasPermi="['office:contact-approval']">审核通过</el-button>
          <el-button v-if="scope.row.status===1" type="primary" plain size="mini" @click="handleExamine(scope.row,'拒绝')" v-hasPermi="['office:contact-approval']">审核拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :autoScroll="false"
      @pagination="getList">
      <template v-slot:popover>
        <el-popover
          placement="top-end"
          width="260"
          trigger="hover"
        >
          <!--弹出的菜单内容-->
          <div class="selectMenu">
            <el-checkbox-group v-model="colOptions">
              <el-checkbox v-for="item in colSelect" :key="item" :label="item" class="displayBlock marginBottom10"/>
            </el-checkbox-group>
          </div>
          <el-button slot="reference" size="mini" class="selectBtn">
            <i class="el-icon-menu"></i><i class="el-icon-caret-bottom"></i>
          </el-button>
        </el-popover>
      </template>
    </pagination>
  </div>
</template>

<script>
  import { listOffice,addOffice } from "@/api/system/office";
  import { contractList,contractApprove,contractRefuse } from "@/api/system/contracts";
  import { getToken } from '@/utils/auth';
  import store from '@/store'

  export default {
    name: "OfficeExamineList",
    data() {
      return {
        dialogVisible: false,  // 弹框： 导入成功
        progressVisible: false,  // 弹框： 导入中
        picturePrefix: process.env.VUE_APP_NGINX_STATIC_RESOURCE_MAPPING_URL, // 图片前缀
        dataList:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status:'提交审批',
          firmName: '',
          practiceCertificateNo: ''
        },
        // 多选框的可选择项
        colOptions: ['事务所编号', '事务所名称', '新联系人名称', '旧联系人名称', '新联系电话', '旧联系电话', '新联系手机号', '旧联系手机号', '申请人姓名', '申请时间','状态', '操作'],
        // 多选框 已选择 的内容，即表格中显示的列
        colSelect: ['事务所编号', '事务所名称', '新联系人名称', '旧联系人名称', '新联系电话', '旧联系电话', '新联系手机号', '旧联系手机号', '申请人姓名', '申请时间','状态','操作'],
        // isTrue属性存放列的状态
        colData: [
          { title: '事务所编号', isTrue: true },
          { title: '事务所名称', isTrue: true },
          { title: '新联系人名称', isTrue: true },
          { title: '旧联系人名称', isTrue: true },
          { title: '新联系电话', isTrue: true },
          { title: '旧联系电话', isTrue: true },
          { title: '新联系手机号', isTrue: true },
          { title: '旧联系手机号', isTrue: true },
          { title: '申请人姓名', isTrue: true },
          { title: '申请时间', isTrue: true },
          { title: '状态', isTrue: true },
          { title: '操作', isTrue: true },
        ],
      };
    },
    beforeUpdate() {
      // 防止动态添加列时 表格乱
      this.$nextTick(() => {
        this.$refs.myTable.doLayout();
      });
    },
    watch: {
      colOptions(newVal, oldVal) {
        if (newVal) {    // 如果有值发生变化，即多选框的已选项变化
          let arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) 	// 未选中
          this.colData.filter(i => {
            if (arr.indexOf(i.title) !== -1) {
              i.isTrue = false
            } else {
              i.isTrue = true
            }
          })
        }
      }
    },
    created() {
      if (this.$route.query && this.$route.query.status) {
        this.queryParams = {};
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          status: this.$route.query.status,
        }
        this.getList()
      } else if (this.$route.query && this.$route.query.officeId) {
        const userInfo = store.getters && store.getters.userInfo
        this.queryParams = {};
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          officeId: userInfo.officeId,
        }
        this.getList()
      }else {
        this.getList();
      }
    },
    methods: {
      resvoleStatus(status){
        switch (status) {
          case 1:
            return '审批中';
          case 2:
            return '通过';
          case -2:
            return '不通过';
          default:
            return '';
        }
      },
      /** 查询权限列表 */
      getList() {
        this.loading = true;
        let obj = JSON.stringify(this.queryParams);
        let init = JSON.parse(obj);
        if(init.status === '提交审批'){
          init.status = 1
        }
        contractList(init).then(res=>{
          this.dataList = res.rows;
          this.total = res.total;
          this.loading = false;
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.roleId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.approvedPracticeDate = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleExport() {
        window.open(process.env.VUE_APP_BASE_API+'/office/contacts/export?Authorization=' + getToken(), '_blank');
      },
      downloadFile(fileId,fileName){
        window.location.href=process.env.VUE_APP_BASE_API +"/ftp/contactDownload?fileId="+fileId+"&fileName="+fileName;
      },
      handleExamine(row,param) {
        if(param === '通过'){
          this.$prompt('理由',`审核通过`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputErrorMessage: `请输入通过理由`,
            //  inputPattern: /\S/, // 必填
          }).then(({ value }) => {
            let temParam = {
              applyId: row.apply_id,
              optReason: value
            };
            this.contractApproveMake(param,temParam)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消审核'
            });
          });
        }else{
          this.$prompt('理由',`审核拒绝`, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputErrorMessage: `请输入拒绝理由`,
            inputPattern: /\S/, // 必填
          }).then(({ value }) => {
            let temParam = {
              applyId: row.apply_id,
              optReason: value
            };
            this.contractApproveMake(param,temParam)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消审核'
            });
          });
        }

      },
      contractApproveMake(param,temParam){
        if(param === '通过'){
          contractApprove(temParam).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.getList();
          });
        }else{
          contractRefuse(temParam).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.getList();
          });
        }
      },
    }
  };
</script>
<style lang="scss" scoped>
  .app-container{
    position: relative;
  }
  /*form 表单 样式设置 start*/
  ::v-deep .el-form-item{
    margin-bottom: 10px;
  }
  ::v-deep label[for='unifiedSocialCreditCode'],
  ::v-deep label[for='nameOfChargePerson'],
  ::v-deep label[for='certificateNoOfResponsity']{
    line-height: 20px;
  }
  ::v-deep .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
  ::v-deep .el-select .el-input--suffix .el-input__inner {
    padding-right: 30px;
  }
  ::v-deep .el-date-editor .el-range-input{
    width: 62%;
  }
  /*form 表单 样式设置 end*/

  .width220{
    width: 220px;
  }
  .failedContent{
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed #ccc;
    p{
      line-height: 24px;
    }
  }
</style>
